<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        v-model="listQuery.phone"
        clearable
        placeholder="手机号"
        style="width: 200px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />

      <el-date-picker
        v-model="times"
        class="filter-item"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        style="width: 250px;"
        clearable
        type="daterange"
        value-format="yyyy-MM-dd"
      />
      <el-select
        v-model="listQuery.activeStatus"
        placeholder="授信结果"
        clearable
        style="width: 150px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      >

        <el-option style="width: auto" label="资料审核中" :value="'PROCESSING'">资料审核中</el-option>
        <el-option style="width: auto" label="风控通过" :value="'PASS'">风控通过</el-option>
        <el-option style="width: auto" label="风控拒绝" :value="'REFUSE'">风控拒绝</el-option>
      </el-select>

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="tableData"
      border
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="编号" align="center" width="80">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.phone }}</span>
        </template>
      </el-table-column>
      <el-table-column label="银行卡号" align="center" min-width="200">
        <template slot-scope="{row}">
          <span>{{ row.accountNo }}</span>
        </template>
      </el-table-column>

      <el-table-column label="信用额度" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.creditLimit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="绑卡状态" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.accountState }}</span>
        </template>
      </el-table-column>
      <el-table-column label="授信结果" align="center" width="100">
        <template slot-scope="{row}">
          <span>{{ row.activeStatus }}</span>
        </template>
      </el-table-column>
      <el-table-column label="活体状态" align="center" width="120">
        <template slot-scope="{row}">
          <span>{{ row.liveCommitState }}</span>
        </template>
      </el-table-column>

      <el-table-column label="创建时间" width="150" align="center">
        <template slot-scope="{row}">
          <span>{{ row.gmtDatetime }}</span>
        </template>
      </el-table-column>


    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="listCyUser"
    />

  </div>
</template>

<script>
import { getPhoneUserDetail, getChannelIdAndNick, listCyUser } from '@/api/user'
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
export default {
  name: 'SmallWin',
  components: { Pagination },
  directives: { waves },
  data() {
    return {
      tableData: [],
      total: 0,
      tableKey: 0,
      listQuery: {
        current: 1,
        size: 10,
        phone: ''
      },
      times: [],
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        update: '用户详情',
        create: '新增'
      },
      dialogPvVisible: false,
      downloadLoading: false,
      listLoading: false,
      optionsCopy: [],
      options: [],
      value: ''
    }
  },
  created() {
    this.listCyUser(this.listQuery)
    this.getChannelIdAndNick()
  },
  methods: {
    atest(id) {
      const routeUrl = this.$router.resolve({
        path: '/map',
        query: { id: id }
      })
      window.open(routeUrl.href, '_blank')
    },
    dataFilter(val) {
      this.value = val
      if (val) { // val存在
        this.options = this.optionsCopy.filter((item) => {
          if (!!~item.channel_name.indexOf(val) || !!~item.channel_name.toUpperCase().indexOf(val.toUpperCase())) {
            return true
          }
        })
      } else { // val为空时，还原数组
        this.options = this.optionsCopy
      }
    },
    async getChannelIdAndNick() {
      const res = await getChannelIdAndNick(this.listQuery)
      res.data.data.forEach(element => {
        if (element.channel_name !== null) {
          this.optionsCopy.push(element)
          this.options.push(element)
        }
      })
    },
    // 获取用户列表
    async listCyUser(listQuery) {
      this.listLoading = true
      const res = await listCyUser(this.listQuery)
      this.tableData = res.data.data.records
      this.total = res.data.data.total
      this.listLoading = false
    },
    handleFilter() {
      this.listQuery.current = 1
      if (this.times == null) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else if (this.times.length === 0) {
        this.listQuery.endTime = ''
        this.listQuery.startTime = ''
      } else {
        this.listQuery.endTime = this.times[1]
        this.listQuery.startTime = this.times[0]
      }
      this.listCyUser(this.listQuery)
    },
    async handleUpdate(row) {
      const res = await getPhoneUserDetail({ 'userId': row.userId })
      if (res.data.data === null) {
        this.$notify({
          title: '错误',
          message: '获取失败',
          type: 'fail',
          duration: 2000
        })
      }
      this.userBaseInfo = res.data.data
      // this.userBaseInfo.loanApps = [{ appName: '1', gmtDatetime: '2323' }, { appName: '2', gmtDatetime: '22323' }]
      this.temp = Object.assign({}, row) // copy obj
      this.temp.timestamp = new Date(this.temp.timestamp)
      this.dialogStatus = 'update'
      this.dialogFormVisible = true
    }
  }
}
</script>

<style scoped>
.pic{
  width: 150px;
  margin-top: 10px;
  margin-left: 10px;
}
.ok{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color:rgb(35, 248, 124)
}
.fail{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
  color: rgb(240, 174, 76);
}
.info{
  margin-left: 10px;
  margin-top: 10px;
  font-weight: 5 00;
}
.info-name{
  margin-left: 50px;
  margin-top: 10px;
  color:rgb(0, 0, 0);
}
.title{
  margin-top: 0px;
  margin-left: 10px;
  font-size: 20px;
  font-weight: 400;
  border-bottom: 1px dashed #304156;
  padding-bottom: 10px;
}
.box{
  margin-top: 10px;
  width: 100%;
  border: solid #304156 1px;
  padding: 20px 10px;
  border-radius: 10px;
}
.nick{
  font-size: 30px;
  font-weight: 600;
  border-bottom: solid #d6d6d6 2px;
  padding-bottom: 10px;
}
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
